<template>
	<view class="">
		<cu-custom bgColor="bg-gradual-green" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">笑忘书集</block>
		</cu-custom>
		<view class="padding">
			<view class="title  ">
				<view class="text-title text-bold u-border-bottom padding-bottom-xs">{{ novel.title }}</view>
				<view class="padding-bottom-sm margin-top-xs">
					<u-icon name="clock" size="20" color="" :label="$u.timeFormat(new Date(novel.createTime).getTime(), 'yyyy-mm-dd')||'' + ' /'" class="margin-right-sm"></u-icon>
					<u-icon name="eye" size="20" color="" :label="novel.readNum||0 + ' /'" class="margin-right-sm"></u-icon>
					<u-icon name="chat" size="20" color="" :label="novel.commentSum||0"></u-icon>
				</view>
			</view>
		
			<u-image width="100%" height="320rpx" :src="novel.cover"></u-image>
		
			<view class="desc-info margin-top padding">{{ novel.description }}</view>
		
			<view class="margin-top">
				<view class="ql-container ql-snow">
					<view class="ql-editor"><u-parse :html="novel.contentFormat" :selectable="true"></u-parse></view>
				</view>
			</view>
			<u-gap height="80"></u-gap>
			<share  :article="novel"></share>
			<u-gap height="60"></u-gap>
			<comment :articleId="articleId"></comment>
		</view>
	</view>
	
</template>

<script>
import comment from '@/components/yr/comment/comment.vue';
import share from '@/components/yr/share/share.vue'
export default {
	components:{
		comment,share
	},
	data() {
		return {
			articleId:'',
			novel: {}
		};
	},
	onLoad(option) {
		this.articleId = option.id;
		this.getNovel(option.id);
		wx.showShareMenu({
			withShareTicket:true,
			//设置下方的Menus菜单，才能够让发送给朋友与分享到朋友圈两个按钮可以点击
			menus:["shareAppMessage","shareTimeline"]
		})
	},
	//发送给朋友
	onShareAppMessage(res) {
		// 此处的distSource为分享者的部分信息，需要传递给其他人
		return {
			title: this.novel.title,
			type: 0,
			path: '/pages/home/novel_content/novel_content?id='+this.novel.id,
			summary: "",
			imageUrl: this.novel.cover
		}
	},
	//分享到朋友圈
	onShareTimeline(res) {
		return {
			title: this.novel.title,
			type: 0,
			query: 'id='+this.novel.id,
			summary: "",
			imageUrl: this.novel.cover
		}
	},
	methods: {
		getNovel(id) {
			this.$u.api.getArticle(id).then(res => {
				this.novel = res.data;
			});
		}
	}
};
</script>

<style lang="stylus">
page
	background #FFFFFF
.title
	.text-title
		font-size 40rpx
.desc-info
	background #9ccc65
	border-radius 10rpx
	color #fff
	font-size 30rpx
	font-family 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif
.ql-editor
	font-size 28rpx!important
	line-height 1.5em!important
	letter-spacing 3rpx!important
.ql-container.ql-snow
	border 0
</style>
